<template>
    <div class="login_bg">
        <div class="help-doc"> <a href="/docs" target="_blank">帮助文档</a></div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" label-width="80px"
                 class="demo-ruleForm login-container">
            <div style="font-size:36px; color:#fff; text-align:center; font-weight:700; line-height:100px;">教育部科研实验室安全检查系统</div>
            <div class="login_body">
                <h3 class="title_login">密码找回</h3>
                <div class="login">
                    <el-form-item v-if="!validateCode" label="手机号" prop="user_name">
                        <el-input type="text" v-model="ruleForm.user_name" auto-complete="off"
                                  placeholder="手机号"></el-input>
                    </el-form-item>
                    <el-form-item  v-if="!validateCode"  label="验证码" prop="verify_code">
                        <div class="code_container">
                            <div class="code_wrap">
                                <el-button v-if="count_down=== 0" type="text" @click="getVerifyCode">获取验证码</el-button>
                                <span v-else>{{count_down}}秒重新获取</span>
                            </div>
                            <el-input type="text" v-model="ruleForm.verify_code" auto-complete="off" placeholder="手机验证码"></el-input>
                        </div>
                    </el-form-item>



                    <el-form-item v-if="validateCode" label="新的密码" prop="new_content">
                        <el-input show-password v-model="ruleForm.new_content"
                                  placeholder="请输入新密码"></el-input>
                    </el-form-item>
                    <el-form-item v-if="validateCode" label="验证密码" prop="content">
                        <el-input  show-password v-model="ruleForm.content"
                                  placeholder="请验证新密码"></el-input>
                    </el-form-item>

                    <el-form-item style="width:100%;">
                        <el-button  v-if="!validateCode"  type="primary" style="width:100%;" @click.native.prevent="validateVerfiyCode"
                                   :loading="logining">下一步
                        </el-button>
                        <el-button  v-else  type="primary" style="width:100%;" @click.native.prevent="resetPassword"
                                   :loading="logining">重置密码
                        </el-button>
                        <el-button type="text"  style="margin-top:30px; margin-left:0; float:right" @click="goToLogin">登录</el-button>
                    </el-form-item>

                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
    // import * as API from "../api/auth_api"
    import {requestLogin, verifyCode,verifyCodeValidate,resetUserPassword, newsList , unitSingUp} from '../api/api';
    import * as auth_api from '../api/auth_api';
    import dict from '../common/js/dict';
    //import NProgress from 'nprogress'
    export default {
        data() {
            var validTelephone = (rule, value, callback) => {
                let reg = /^1[3|4|5|7|8][0-9]{9}$/;
                if (!reg.test(value)) {
                    callback(new Error('请输入正确的手机号码'));
                } else {
                    callback();
                }
            }

            var validPassword = (rule,value,callback) => {
                if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(value)){
                    callback(new Error("密码要求长度6-20位的字母与数字组合"));
                }else{
                    callback();
                }
            }
            var validPassword2 = (rule,value,callback) => {
                if(this.ruleForm.new_content !== value){
                    callback(new Error("两次密码输入不一致"));
                }else{
                    callback();
                }
            }
            return {
                dict:dict,
                logining: false,
                count_down: 0,
                signDialogVisible: false,
                validateCode: false,
                ruleForm: {
                    user_name: '',
                    content: '',
                    new_content: '',
                    verify_code: ''
                },
                rules: {
                    user_name: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        { validator: validTelephone, trigger: 'blur' }
                    ],
                    new_content: [
                        {required: true, message: '请输入新的密码', trigger: 'blur'},
                        { validator: validPassword, trigger: 'blur' }
                    ],
                    content: [
                        {required: true, message: '请验证新密码', trigger: 'blur'},
                        { validator: validPassword2, trigger: 'blur' }
                    ],
                    verify_code: [
                        {required: true, message: '请输入验证码', trigger: 'blur'},
                    ]
                }
            };
        },

        methods: {
            handleReset(formName) {
                this.$refs[formName].clearValidate();
            },
            countDown() {
                this.timer && clearInterval(this.timer)
                if (this.count_down === 0) {
                    return false
                }
                this.count_down--
                this.timer = setInterval(() => {
                    this.countDown()
                }, 1000)
            },
            getVerifyCode() {
                this.rules.verify_code[0].required = false
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        var loginParams = {
                                user_name: this.ruleForm.user_name
                            }
                        verifyCode(loginParams).then(data => {
                            this.rules.verify_code[0].required = true
                            let {msg, status, datas} = data;
                            if (status !== 200) {
                                this.$message({
                                    message: msg,
                                    type: 'error'
                                });
                            } else {
                                this.$message({
                                    message: "手机验证码发送成功，请查收",
                                    type: 'success'
                                });
                                this.count_down = 60
                                this.countDown()
                            }
                        });
                    } else {

                        return false;
                    }
                });

            },
            goto() {
                this.$router.push({path: this.role_url});
            },
            validateVerfiyCode(){
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        var params = {
                            user_name: this.ruleForm.user_name,
                            verify_code:this.ruleForm.verify_code
                        }
                        verifyCodeValidate(params).then(data => {
                            let {msg, status, datas} = data;
                            if (status !== 200) {
                                this.$message({
                                    message: msg,
                                    type: 'error'
                                });
                            } else {
                                this.handleReset('ruleForm')
                                this.$nextTick(()=>{
                                    this.validateCode = true
                                })
                            }
                        });
                    } else {

                        return false;
                    }
                });
            },
            resetPassword(){
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        resetUserPassword(this.ruleForm).then(data => {
                            let {msg, status, datas} = data;
                            if (status !== 200) {
                                this.$message({
                                    message: msg,
                                    type: 'error'
                                })
                            } else {
                                this.$message({
                                    message: "重置成功，请重新登录",
                                    type: 'success'
                                })
                                this.$router.push('/login')
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            goToLogin(){
                this.$router.push('/login')
            }
        },
        created: function () {
            var _this = this;
            window.onkeydown = function (e) {
                if (e.keyCode == 13) {
                   console.log('entr enter')
                }

            }
        }
    }

</script>

<style>

</style>
<style lang="scss" scoped>
    .help-doc{
        position:absolute;
        top:20px;
        right:30px;
        a{
           font-size:16px;
            &:hover{
                color:#fff;
            }
        }
    }

    .code_container {
        position: relative;
        .code_wrap {
            position: absolute;
            right: 0;
            top: 1px;
            z-index: 1;
            span {
                padding: 0 20px;
                color: #aaa;
            }
        }
    }

    .title_login i {
        font-size: 10px;
        color: #333;
        font-style: normal
    }

    .login_bg {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: url("/assets/images/bg_ding.jpg") center;
        background-size: cover;
    }

    .login-container {
        .login_body {
            font-size: 20px;
            -webkit-border-radius: 8px;
            border-radius: 8px;
            -moz-border-radius: 8px;
            background-clip: padding-box;
            padding: 40px 66px 50px;
            background: rgba(255, 255, 255, 1);
            overflow: hidden;
            .news {
                width: 400px;
                float: left;
                color: #666;
                ul {
                    padding: 0;
                    margin: 10px 0
                }
                margin-right: 80px;
                h3 {
                    margin: 0;
                    font-weight: 100;
                    font-size: 18px
                }
                li {
                    list-style: none;
                    position: relative;
                    margin: 0;
                    padding: 5px 0;
                    border-bottom: 1px solid #ddd
                }
                p {
                    margin: 5px 0
                }
                .title {
                    font-size: 16px;
                }
                .date {
                    font-size: 14px;
                }
                .icon {
                    position: absolute;
                    right: 0;
                    top: 20px;
                }
            }
            .login {
                border-top: 1px solid #ddd;
                padding: 50px 30px 0;
                width: 360px;
                min-height: 160px;
                margin: 0 auto;
            }

        }
        /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
        /* -webkit-border-radius: 8px;
         border-radius: 8px;
         -moz-border-radius: 8px;
         background-clip: padding-box;
         width: 260px;
         padding: 35px 35px 15px;
         background: #fff;
         border: 1px solid #eaeaea;*/

        position: absolute;
        top: 50%;
        margin: -280px 0 0 -318px;
        left: 50%;
        z-index: 5;
        // box-shadow: 0 0 25px #cac6c6;
        .title_login {
            margin: 0px auto 20px auto;
            text-align: center;
            font-size: 36px;
            color: #333;
        }
        .remember {
            margin: 0px 0px 35px 0px;
        }

        .el-button--primary {
            background: #ff5353;
            border: #ff5353;
            font-size: 18px;
            height: 40px
        }
    }
</style>
